<template>
  <!-- 订单确认页面 -->
  <div class="order">
    <div style="background-color:#fff;padding-bottom:12px;">
      <!-- 热销课程 -->
      <p class="text-p1">购买课程：</p>
      <!-- 热销课程列表 -->
      <div class="column-center" style="margin-top:7px;">
        <div class="list-item flex-row">
          <!-- <van-image width="32%" fit="contain"></van-image> -->
          <van-image width="116" height="116" fit="contain" :src="course.courseImg" />
          <div class="column-space-around" style="background-color:#fff;padding:7px;width:241px;">
            <p class="text-p2">{{course.courseName}}</p>
            <p class="text-p3">
              {{course.courseType}}-
              <van-icon name="location" size="10" color="#F40404" />
              {{course.courseAddress}}
            </p>
            <p class="text-p3">已选：{{skuText}}</p>
            <div style="text-align:left">
              <span style="color:#F40404;">￥{{price/100}}</span>
              <span class="line-m" v-if="course.makingPrice!=''">￥{{course.makingPrice}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-field
      style="margin:6px 0;"
      v-model="sms"
      center
      clearable
      label="优惠码"
      placeholder="请输入优惠码"
    >
      <van-button slot="button" size="small" @click="GetDiscountMsg">确认</van-button>
    </van-field>
    <van-field
      style="margin-top:6px;"
      v-model="message"
      rows="3"
      autosize
      label="买家留言"
      type="textarea"
      maxlength="30"
      placeholder="请输入留言内容"
      show-word-limit
    />
    <p style="color: rgba(16, 16, 16, 0.65);font-size: 12px;margin:18px 23px;">提示：该课程为线下课，请注意上课地址</p>
    <van-submit-bar
      :price="discountPrice"
      button-text="提交订单"
      @submit="orderSubmit"
      safe-area-inset-bottom
      button-type="warning"
    >
      <p v-if="discountRatio!='1'">优惠：￥{{preferential}}</p>
    </van-submit-bar>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      @close="onClose"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import { GetDiscountMsg, SubmitOrder, ChooseMethod } from "@/api/order";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      sms: "", //优惠码
      message: "", //留言
      show: false, //支付方式弹窗
      actions: [], //支付方式列表
      discountRatio: 1, //折扣
      skuText: "", //规格类型文本
      price: "" //原价
    };
  },
  methods: {
    // 提交订单--选择支付方式
    async onSelect(item) {
      Toast.loading({ forbidClick: true, duration: 0 });
      const result = await ChooseMethod({
        orderNo: this.submitOrderID,
        paymentType: item.paymentMethod,
        courseID: this.course.courseID
      });
      if (result.result == "OK") {
        this.$router.replace({ name: "Success" });
      } else {
        this.$router.replace({ name: "Success" });
      }
      Toast.clear();
      // 选择支付方式成功
    },
    // 优惠券确认
    async GetDiscountMsg() {
      const result = await GetDiscountMsg({
        discountCode: this.sms,
        courseID: this.course.courseID
      });
      if (result.result == "OK") {
        this.discountRatio =
          parseFloat(result.data.discountRatio.replace("%", "")) / 100;
      }
    },
    // 支付方式关闭
    onClose() {
      console.log("关闭触发");
      this.$router.replace({ name: "Success" });
    },
    // 订单提交
    async orderSubmit() {
      Toast.loading({
        forbidClick: true,
        duration: 0
      });
      const result = await SubmitOrder({
        courseID: this.course.courseID,
        courseName: this.course.courseName,
        specification: this.skuText,
        campusID: this.course.campusID,
        discountCode: this.sms,
        customerAccount: this.phone,
        actualPrice: this.discountPrice / 100,
        originalPrice: parseFloat(this.price) / 100,
        customerMessage: this.message,
        paymentType: ""
      });
      if (result.result == "OK") {
        this.$store.commit("setSubmitOrderId", result.data.orderID); //缓存订单id
        Toast.success("订单提交提交成功！请选择支付方式！");
        setTimeout(() => {
          this.show = true; //展示支付弹窗
        }, 2000);
      } else {
        Toast.fail(result.msg);
      }
    }
  },
  computed: {
    ...mapGetters({
      course: "getCourse",
      phone: "getPhone",
      submitOrderID: "getSubmitOrderId"
    }),
    discountPrice() {
      // 实际支付价格
      if (this.discountRatio != 1) {
        return this.price * (1 - this.discountRatio);
      }
      return this.price;
    },
    preferential() {
      // 优惠
      return (this.price - this.discountPrice) / 100;
    }
  },
  async created() {
    this.skuText = this.$route.params.skuText;
    this.price = parseFloat(this.$route.params.price);

    let offline = this.course.paymentMethod.indexOf("1"); //线下
    let online = this.course.paymentMethod.indexOf("2"); //线上
    let cash = this.course.paymentMethod.indexOf("3"); //现金
    let list = [];

    if (online >= 0) {
      list.push({ id: 1, name: "线上支付", paymentMethod: "2" });
    }
    if (offline >= 0 && cash >= 0) {
      list.push({ id: 2, name: "线下支付", paymentMethod: "1,3" });
    } else if (offline >= 0) {
      list.push({ id: 2, name: "线下支付", paymentMethod: "1" });
    } else if (cash >= 0) {
      list.push({ id: 2, name: "线下支付", paymentMethod: "3" });
    }
    this.actions = list;
  }
};
</script>

<style lang="scss" scoped>
.order {
  background-color: #f7f7f7;
  // display:flex;
  // flex-direction:column;
  position: absolute;
  width: 100%;
  height: 100%;
}
.text-p1 {
  color: #101010;
  font-size: 13px;
  margin: 12px 0 0 12px;
  text-align: left;
  height: auto;
}
.text-p2 {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  margin: 3px 0 3px 0;
}
.text-p3 {
  margin: 0;
  color: rgba(16, 16, 16, 0.65);
  font-size: 10px;
  text-align: left;
  line-height: 12px;
}
.text-p4 {
  color: rgba(16, 16, 16, 0.65);
  font-size: 10px;
  text-align: left;
}
.list-item {
  width: 95%;
  height: 116px;
  background-color: #fff;
  line-height: 20px;
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 0);
}
</style>